<template>
  <div class="hello">
    
    <h1><small>{{ msg }}</small></h1>
    <div class=" row">
      <label for="newJob" class="sr-only">new job</label>
      <input type="text" name="newJob" id="newJob" class="input-lg col-sm-6 col-sm-offset-3" placeholder="new job" v-model="newJob" @keyup.enter="onEnter">
    </div>

    <div class="panel-group">
      <div class="panel panel-default" v-for="(item, index) in items">
        <div class="panel-heading" role="button" @click="toggleShow(item,$event)">
          <span class="panel-title text-left" v-text="item.label"></span>
          <btn type="success" size="xs" v-if="item.status" @click.stop="transferStatus(item)" >Completed!</btn>
          <btn type="info" size="xs" v-if="!item.status" @click.stop="transferStatus(item)">Pengding</btn>
          <btn type="warning" size="xs" @click.stop="">Edit</btn>
          <btn type="danger" size="xs" @click.stop="deleteJob(index,item.id)">Delete</btn>
        </div>

        <collapse v-model="item.showDetail">
          <div class="panel-body">
            <textarea class="form-control" v-text="item.content" @blur.stop="saveContent(item,$event)"></textarea>
          </div>
        </collapse>
      </div>
    </div>
  </div>
</template>

<script>
import uuid from 'node-uuid'
// import {util} from '../common/baseUtil'
import util from '../common/baseUtil'
export default {
  name: 'HelloWorld',
  created : function(){
    console.log("init...");
    console.log(util);
    var el = this;
    $.ajax({
      url : "http://localhost:3000/items",
      async: false,
      success : function(data){
        $.each(data,function(index, item){
          item.status = (item.status === 'true') ? true : false;
          item.showDetail = false;
          el.items.push(item);
        });
      }
    });
    console.log(el.items);
  },
  data () {
    return {
      msg: 'My Todolist',
      items: [],
      newJob: ''
    }
  },
  methods : {
    transferStatus : function(item, e){
      // var data = {
      //   label : item.label,
      //   content : item.content,
      //   status : !item.status,
      //   content : item.content
      // };
      var data = util.copyObject(item);
      data.status = !data.status;
      $.ajax({
        url:"http://localhost:3000/items/" + item.id,
        type:"PUT",
        data:data,
        success :function(){
          item.status = !item.status;
        },
        error : function(e){
          console.log(e);
        }
      });
    },
    onEnter : function(){
      if(this.newJob){
        var el = this;
        var job = {
          id : uuid.v4(),
          label : this.newJob,
          content : '',
          status : false,
          showDetail : false
        };
        $.ajax({
          url:"http://localhost:3000/items/",
          type : 'POST',
          contentType : 'application/json',
          data : JSON.stringify(job),
          success : function(){
            el.items.push(job);
            el.newJob = '';
          },
          error : function(e){
            console.log(e);
          }
        });
      }
    },
    saveContent : function(item,e){
      var el = this;
      var data = {
        label : item.label,
        content : item.content,
        status : item.status,
        content : e.target.value
      };
      console.log(e.target.value);
      $.ajax({
        url:"http://localhost:3000/items/" + item.id,
        type:"PUT",
        data:data,
        success :function(){
          el.$notify(item.label + " save");
        },
        error : function(e){
          console.log(e);
        }
      });
    },
    deleteJob : function(index,itemId){
      var el = this;

      this.$confirm({
        title : 'delete',
        content : 'This item will be permanently deleted. Continue?'
      }).then(()=>{
        $.ajax({
          url:"http://localhost:3000/items/" + itemId,
          type:'DELETE',
          success : function(){
            el.items.splice(index,1);
          }
        });
        this.$notify({
          type : 'success',
          content : 'Delete successfully!'
        })
      }).catch(()=>{
          this.$notify('Delete fail!');
      }); 
    },
    toggleShow : function(item){
      item.showDetail = !item.showDetail;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin: 0 10px;
}
a {
  color: #42b983;
}
input {
  margin-bottom: 20px;
}
span {
  font-size: 1.5em
}
</style>
